/**
 * @fileoverview 动态图标系统，自动导入和导出所有SVG图标
 *
 * 使用方法:
 * 1. 从特定文件导入: import { Icons } from '@/utils/icons'; <Icons.IconName />
 * 2. 使用统一组件: import { Icon } from '@/utils/icons'; <Icon name="iconName" />
 */
import * as React from "react";

// 导出SVG属性类型，方便复用
export type SVGProps = React.SVGProps<SVGSVGElement>;

// 动态导入所有SVG图标，只使用 icons 目录
const svgModules = import.meta.glob<{ ReactComponent: React.FC<SVGProps> }>(
  "../assets/**/*.svg", // 只导入 icons 目录下的文件
  { eager: true }
);

// 构建图标名称类型和映射对象
const iconComponents: Record<string, React.FC<SVGProps>> = {};
const iconNames: string[] = [];
// 用于忽略大小写的图标映射
const caseInsensitiveIconMap: Record<string, string> = {};

// 从导入的模块中提取图标组件并生成映射
Object.entries(svgModules).forEach(([path, module]) => {
  // 从路径中提取文件名作为图标名称 (/assets/path/name.svg -> name)
  const iconName = path.match(/\/([^/]+)\.svg$/)?.[1] || "";

  if (iconName && module.ReactComponent) {
    // 直接使用文件名作为图标名，保持大驼峰命名约定
    iconComponents[iconName] = module.ReactComponent;
    iconNames.push(iconName);
    // 添加小写映射用于忽略大小写查找
    caseInsensitiveIconMap[iconName.toLowerCase()] = iconName;
  }
});

// 将字符串名称列表转换为类型
export type IconName = (typeof iconNames)[number] | string;

// 图标映射
export const icons: Record<string, React.FC<SVGProps>> = iconComponents;

// 统一的图标组件属性
export interface IconProps extends SVGProps {
  name: IconName;
  size?: number;
}

/**
 * 统一的图标组件
 * @example <Icon name="Placeholder" size={24} fill="currentColor" />
 */
export const Icon = ({ name, size, width, height, ...props }: IconProps) => {
  // 查找图标时忽略大小写
  const exactName = icons[name]
    ? name
    : caseInsensitiveIconMap[name.toLowerCase()];
  const IconComponent = exactName ? icons[exactName] : null;

  // 如果找不到图标，使用默认占位符或返回null
  if (!IconComponent) {
    console.warn(`Icon "${name}" not found, using fallback`);
    const Fallback =
      icons["Placeholder"] || Object.values(icons)[0] || (() => null);
    return React.createElement(Fallback, {
      width: size || width,
      height: size || height,
      ...props,
    });
  }

  return React.createElement(IconComponent, {
    width: size || width,
    height: size || height,
    ...props,
  });
};

// 动态构建导出的Icons对象，便于按需导入
type IconsType = {
  [key: string]: React.FC<SVGProps>;
};

// 创建图标组件映射
const Icons = Object.entries(iconComponents).reduce(
  (acc, [name, component]) => {
    // 直接使用文件名作为组件名
    acc[name] = component;
    return acc;
  },
  {} as IconsType
);

export { Icons };
export default Icon;
